import React, { useState } from 'react';
import { Link, graphql } from 'gatsby';
import styled from 'styled-components';
import { rgba, darken, lighten } from 'polished';
import { Layout, Wrapper, Button, Article } from '../components';
import PageProps from '../models/PageProps';
import { Helmet } from 'react-helmet';
import config from '../../config/SiteConfig';
import { media } from '../utils/media';
import loadable from '@loadable/component';
import Script from 'react-load-script';

const Homepage = styled.main`
  display: flex;
  height: 100vh;
  flex-direction: row;
  animation: 0.5s ease-in-out both slide;
  @media ${media.tablet} {
    height: 100%;
    flex-direction: column;
  }
  @media ${media.phone} {
    height: 100%;
    flex-direction: column;
  }
`;

const GridRow: any = styled.div`
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: ${(props: any) =>
    props.background
      ? `linear-gradient(
      -185deg,
      ${rgba(darken(0.1, props.theme.colors.primary), 0.7)}, 
      ${rgba(lighten(0.1, props.theme.colors.black), 0.9)}), url(${config.defaultBg}) no-repeat`
      : null};
  background-size: cover;
  padding: 2rem 4rem;
  color: ${(props: any) => (props.background ? props.theme.colors.white : null)};
  h1 {
    color: ${(props: any) => (props.background ? props.theme.colors.white : null)};
  }
  @media ${media.tablet} {
    padding: 3rem 3rem;
  }
  @media ${media.phone} {
    padding: 2rem 1.5rem;

    .or-under-button {
      margin-top: 0.88rem;
    }
  }
`;

const HomepageContent = styled.div<{ center?: boolean }>`
  max-width: 30rem;
  text-align: ${(props) => (props.center ? 'center' : 'left')};
  animation: 1s ease-in-out 0.2s both fadeIn;
`;

const ReactLive2d = loadable(() => import('react-live2d'));

export default ({ data }: PageProps) => {
  const { edges, totalCount } = data.allMarkdownRemark;
  const [live2dScriptLoaded, setLive2dScriptLoaded] = useState(false);

  const handleScriptLoad = () => {
    setLive2dScriptLoaded(true);
  };

  return (
    <Layout>
      <Wrapper fullWidth={true}>
        <Helmet title={`首页 | ${config.siteTitle}`} />
        <Homepage>
          <GridRow background={true}>
            <HomepageContent center={true}>
              <img src={config.siteLogo} alt={config.siteTitle} />
              <h1>
                欢迎您
                <br />
                我是 Jeffrey
              </h1>
              <p>我是一名 年轻的 正在奋斗中的 可能也挺秃然的 Web前端爱好者</p>
              <Link to="/blogs">
                <Button big={true}>
                  <svg
                    className="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5741"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M957.792 384l-56.192 0-1.184 0c-35.168 0-65.984-29.728-68.384-64l0 0C832 137.344 684.736 0 500.8 0l-167.84 0C149.184 0 0.128 148 0 330.656l0 362.784C0 876.128 149.184 1024 332.992 1024l358.432 0C875.36 1024 1024 876.128 1024 693.472L1024 459.072C1024 422.592 994.56 384 957.792 384zM320 256l192 0c35.2 0 64 28.8 64 64s-28.8 64-64 64l-192 0c-35.2 0-64-28.8-64-64S284.8 256 320 256zM704 768 320 768c-35.2 0-64-28.8-64-64s28.8-64 64-64l384 0c35.2 0 64 28.8 64 64S739.2 768 704 768z"
                      p-id="5742"
                      fill="#ffffff"
                    ></path>
                  </svg>
                  博客文章
                </Button>
              </Link>
              <Link to="/works">
                <Button big={true} className="or-under-button">
                  <svg
                    className="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="10466"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M959.586263 721.713131L746.925253 509.25899l193.939393-193.83596c13.34303-13.136162 20.997172-30.513131 21.721213-48.82101 0.72404-18.928485-6.102626-36.615758-19.238788-49.648485L807.641212 81.144242c-12.515556-12.412121-29.168485-19.135354-47.062626-19.135353-19.031919 0-37.85697 7.86101-51.613738 21.721212l-80.782222 80.678788c-0.103434 0.103434-0.206869 0.103434-0.206868 0.206869l-0.206869 0.206868-112.743434 112.64L302.467879 65.008485c-12.929293-12.825859-29.99596-19.859394-48.09697-19.859394-18.204444 0-35.271111 7.033535-48.09697 19.859394L63.844848 207.334141c-12.825859 12.929293-19.859394 29.99596-19.859393 47.993536 0 18.204444 7.033535 35.271111 19.859393 48.096969l212.661011 212.350708L115.355152 676.822626c-4.240808 4.137374-6.826667 9.826263-7.240405 15.825455L69.740606 925.99596c0 0.206869 0 0.310303-0.103434 0.517171v0.310303c0 0.310303-0.103434 0.517172-0.103435 0.827475v4.137374c0.103434 1.551515 0.310303 2.999596 0.724041 4.447677 0 0.103434 0.103434 0.310303 0.103434 0.413737 0.103434 0.517172 0.310303 1.034343 0.413737 1.448081 2.792727 8.585051 10.136566 14.791111 19.135354 16.239192h0.827475c1.137778 0.103434 2.172121 0.206869 3.309899 0.206868 1.034343 0 1.965253-0.103434 2.896161-0.206868 0.310303 0 0.620606-0.103434 0.930909-0.103435h0.103435l236.037172-38.684444c5.895758-1.034343 10.96404-4.033939 14.584242-8.274748l159.806061-159.702626 212.557575 212.454142c12.929293 12.825859 29.99596 19.859394 48.09697 19.859394 18.204444 0 35.271111-7.033535 48.09697-19.859394l142.429091-142.222223c12.825859-12.929293 19.859394-29.99596 19.859394-47.993535 0-18.204444-7.13697-35.271111-19.859394-48.09697zM743.615354 118.380606c4.654545-4.654545 10.860606-7.343838 16.859798-7.343838 4.861414 0 9.205657 1.758384 12.308686 4.861414l135.912728 135.809293c3.309899 3.206465 4.964848 7.757576 4.757979 13.032727-0.206869 5.792323-2.792727 11.481212-7.343838 16.032323l-63.612121 63.508687-162.495354-162.391919L743.615354 118.380606zM98.598788 268.774141c-3.516768-3.516768-5.48202-8.274747-5.48202-13.34303s1.965253-9.826263 5.48202-13.34303L241.027879 99.762424c3.516768-3.516768 8.274747-5.48202 13.34303-5.48202s9.826263 1.965253 13.34303 5.48202l212.454142 212.557576-169.011717 168.804848-212.557576-212.350707z m229.417374 264.998788l0.620606-0.620606 203.869091-203.558788c0.620606-0.620606 1.241212-1.344646 1.758383-1.965252l110.985051-110.985051 162.495353 162.39192-112.846868 112.743434-0.103435 0.103434-203.765656 203.558788-0.103434 0.103434L329.87798 856.488081 167.382626 694.199596l160.633536-160.426667zM149.178182 745.399596L278.67798 874.79596 123.733333 900.240808l25.444849-154.841212z m775.654141 37.546667L782.506667 925.271919c-3.516768 3.516768-8.274747 5.48202-13.343031 5.48202s-9.826263-1.965253-13.34303-5.48202L543.159596 712.817778l71.68-71.576566 97.331717-97.331717 212.66101 212.350707c3.516768 3.516768 5.48202 8.274747 5.48202 13.34303s-1.965253 9.826263-5.48202 13.343031z m0 0"
                      p-id="10467"
                      fill="#ffffff"
                    ></path>
                    <path
                      d="M414.280404 643.413333c6.412929 0 12.515556-2.585859 17.37697-7.240404l198.593939-198.490505c4.551111-4.551111 7.240404-10.860606 7.240404-17.376969s-2.585859-12.722424-7.240404-17.37697c-4.551111-4.551111-10.860606-7.240404-17.37697-7.240404-6.619798 0-12.722424 2.585859-17.376969 7.240404l-198.59394 198.490505c-4.551111 4.551111-7.240404 10.860606-7.240404 17.37697s2.585859 12.825859 7.13697 17.273535c4.654545 4.75798 10.860606 7.343838 17.480404 7.343838z m0 0"
                      p-id="10468"
                      fill="#ffffff"
                    ></path>
                  </svg>
                  作品集合
                </Button>
              </Link>
              <Link to="/field">
                <Button big={true} className="under">
                  <svg
                    className="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="12896"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M945.493333 890.88l-143.36-252.586667-153.6-266.24V119.466667h51.2c27.306667 0 51.2-23.893333 51.2-51.2S727.04 17.066667 699.733333 17.066667h-375.466666C296.96 17.066667 273.066667 40.96 273.066667 68.266667s23.893333 51.2 51.2 51.2H375.466667v252.586666l-153.6 269.653334-143.36 252.586666c-13.653333 23.893333-13.653333 51.2 0 75.093334 13.653333 23.893333 37.546667 37.546667 64.853333 37.546666h733.866667c27.306667 0 51.2-13.653333 64.853333-37.546666 17.066667-23.893333 17.066667-54.613333 3.413333-78.506667zM307.2 68.266667c0-10.24 6.826667-17.066667 17.066667-17.066667h375.466666c10.24 0 17.066667 6.826667 17.066667 17.066667s-6.826667 17.066667-17.066667 17.066666h-375.466666c-10.24 0-17.066667-6.826667-17.066667-17.066666z m98.986667 314.026666c0-3.413333 3.413333-6.826667 3.413333-6.826666V119.466667h204.8V375.466667c0 3.413333 0 6.826667 3.413333 6.826666l139.946667 249.173334H266.24l139.946667-249.173334z"
                      fill="#ffffff"
                      p-id="12897"
                    ></path>
                  </svg>
                  试验田
                </Button>
              </Link>
              <Link to="/contact">
                <Button big={true} className="under">
                  <svg
                    width="1792"
                    height="1792"
                    viewBox="0 0 1792 1792"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path d="M1764 11q33 24 27 64l-256 1536q-5 29-32 45-14 8-31 8-11 0-24-5l-453-185-242 295q-18 23-49 23-13 0-22-4-19-7-30.5-23.5t-11.5-36.5v-349l864-1059-1069 925-395-162q-37-14-40-55-2-40 32-59l1664-960q15-9 32-9 20 0 36 11z" />
                  </svg>
                  联系我
                </Button>
              </Link>
            </HomepageContent>
          </GridRow>
          <GridRow>
            <HomepageContent>
              <h2>关于我？</h2>
              <p>
                一切兴趣使然...
                <br />
                喜欢阅读一些前端技术相关的文章...
                <br />
                喜欢学习一些新的或者（国内）冷门的前端技术框架...
                <br />
                喜欢尝试把 github 上一些开源项目克隆下来练练手、涨涨姿势...
              </p>
              <hr />
              <h2>最新博客</h2>
              {edges.map((post) => (
                <Article
                  title={post.node.frontmatter.title}
                  date={post.node.frontmatter.date}
                  excerpt={post.node.excerpt}
                  timeToRead={post.node.timeToRead}
                  slug={post.node.fields.slug}
                  category={post.node.frontmatter.category}
                  key={post.node.fields.slug}
                />
              ))}
              <p className={'textRight'}>
                <Link to={'/blogs'}>全部博客 ({totalCount})</Link>
              </p>
            </HomepageContent>
          </GridRow>
        </Homepage>
        <Script
          url="//zfy95.gitee.io/static/lib/live2d/live2dcubismcore.min.js"
          onLoad={handleScriptLoad}
        />
        {live2dScriptLoaded ? (
          <ReactLive2d
            width={210}
            height={350}
            bottom={'-30px'}
            right={'auto'}
            left={'0'}
            ModelList={['lafei_4']}
            TouchDefault={[
              '<div style="text-align: center;user-select: none;letter-spacing: 0.3rem;">你好呀~</div>',
            ]}
            menuList={[]}
          />
        ) : (
          ''
        )}
        <Script url="//zfy95.gitee.io/static/lib/APlayer/main.min.js" />
      </Wrapper>
    </Layout>
  );
};
export const IndexQuery = graphql`
  query {
    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            date(formatString: "YYYY.MM.DD")
            category
          }
          timeToRead
        }
      }
    }
  }
`;
